<template>
	<view class="container">
		<!--切换-->
		<view class="flex-row head-tabs">
			<view @click="toggleTab(0)" class="tab" :class="{active: tabIndex == 0}">
				<text>特种证书</text>
			</view>
			<view @click="toggleTab(1)" class="tab" :class="{active: tabIndex == 1}">
				<text>特种设备</text>
			</view>
			<view @click="toggleTab(2)" class="tab" :class="{active: tabIndex == 2}">
				<text>安全管理人员</text>
			</view>
		</view>
		<!--列表-->
		<scroll-view scroll-y="true" class="scroll">
			<!--证书-->
			<view v-show="tabIndex == 0">
				<view class="card" v-for="(item, index) in list" :key="index" @click="toPage(0, item)">
					<view class="title flex-row">
						<view class="name">持证人：{{ item.cert_man || '' }}</view>
					</view>
					<view class="item">证书编号：{{ item.num || '' }}</view>
					<view class="item">证书有效期：{{ item.last_day || '' }}</view>
				</view>
			</view>
			<!--设备-->
			<view v-show="tabIndex == 1">
				<view class="card" v-for="(item, index) in list" :key="index" @click="toPage(1, item)">
					<view class="title flex-row">
						<view class="name">设备名称：{{ item.name || '' }}</view>
					</view>
					<view class="item">负责人：{{ item.response_man_name || '' }}</view>
					<view class="item">内部编号：{{ item.num_inner || '' }}</view>
				</view>
			</view>
			<!--人员-->
			<view v-show="tabIndex == 2">
				<view class="card" v-for="(item, index) in list" :key="index" @click="toPage(2, item)">
					<view class="title flex-row">
						<view class="name">名称：{{ item.name || '' }}</view>
					</view>
					<view class="item">职务：{{ item.roleName || '' }}</view>
					<view class="item">备注：{{ item.remarks || '' }}</view>
				</view>
			</view>
			<view class="nodata">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			tabIndex: 0,
			userid: uni.getStorageSync('userid'),
			page: 1,
			total: 1,
			list: []
		}
	},
	onLoad(){
		this.getList();
	},
	methods: {
		// 切换tab
		toggleTab(index){
			this.tabIndex = index;
			this.page = 1;
			this.total = 1;
			this.list = [];
			this.getList();
		},
		// 详情
		toPage(index, item){
			uni.setStorageSync('infoShareSpecialDetail', item);
			uni.navigateTo({
				url: `detail?type=${index}&id=${item.id}`
			})
		},
		// 获取列表
		getList(){
			let _this = this;
			let api = '';
			
			// 根据当前类型动态设置API
			if(this.tabIndex == 0) api = this.$API.infoShareSpecialCertList;
			if(this.tabIndex == 1) api = this.$API.infoShareSpecialEquipList;
			if(this.tabIndex == 2) api = this.$API.infoShareSpecialMemberList;
			
			uni.request({
				url: api,
				header: this.$API.get_head(),
				data: { userid: this.userid },
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.scroll{
	height: calc(100vh - 80upx);
	overflow: hidden;
}


/*卡片*/
.card{
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	background-color: #fff;
	position: relative;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}

</style>
